<!DOCTYPE html>
<html>

	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<link href="__STATIC__/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
		<script type="text/javascript" src="__STATIC__/jquery-2.1.3.js"></script>
		<!--剪切图片插件-->
		<link href="__STATIC__/cropper/cropper.min.css" rel="stylesheet" media="screen" />
		<script src="__STATIC__/cropper/cropper.min.js"></script>
		<script src="__STATIC__/cropper/crop_instru_add.js"></script>
		<style>
			body {
				margin: 0;
			}
			label {
				color: grey;
			}
			code {
				display: none;
			}
			.highlight {
				border: 1px solid #e1e1e8;
				background: #fff;
				border-radius: 4px;
				margin: 15px 0;
				padding: 15px 0 0;
			}
			.pt5 {
				padding-top: 5px;
			}
		</style>
	</head>

	<body>
		<!-- top -->
		<div class="container">
			<div class="row">
				<!-- right -->
				<div class="col-xs-12">
					<div class="row" style="margin:15px 0;">
						<div id="actTips" class="col-xs-12 alert alert-info">
							<h4>小秘书提示：</h4>
							<p>你可以在这里增加乐器（注册与参加活动时将会被使用）</p>
						</div>
					</div>
					<div class="row highlight">
						<!-- 表单 begin -->
						<form action="{:U('Instrument/instru_save')}" id="formUrl" class="form-horizontal" style="padding:5px 10px;" method="post" enctype="multipart/form-data">
							<!-- 乐器名字 -->
							<div class="form-group">
								<label for="type" class="col-xs-2 control-label">乐器名字：</label>
								<div class="col-xs-6">
									<input name="name" id="name" class="form-control" />
								</div>
							</div>
							<!--乐器图片 -->
							<div class="form-group">
								<label for="title" class="col-xs-2 control-label">乐器图片：</label>
								<div class="col-xs-6">
									<input type="file" name="imgurl" class="form-control" id="imgurl">
								</div>
								<div class="col-xs-3 pt5"><code id="logo_err"></code>
								</div>
							</div>
							<!--乐器图片预览-->
							<div class="form-group" id="img_preview">
								<div class="docs-data" hidden="hidden">
									<input class="form-control" id="dataX" name="dataX" type="text" placeholder="x">
									<input class="form-control" id="dataY" name="dataY" type="text" placeholder="y">
									<input class="form-control" id="dataWidth" name="dataWidth" type="text" placeholder="width">
									<input class="form-control" id="dataHeight" name="dataHeight" type="text" placeholder="height">
								</div>
								<label for="title" class="col-xs-2 control-label">图片预览：</label>
								<div class="col-md-7">
									<div class="row">
										<div class="col-md-10">
											<div class="img-container">
												<img id="showimg">
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- 乐器对应称谓 -->
							<div class="form-group">
								<label for="address" class="col-xs-2 control-label">乐器对应称谓：</label>
								<div class="col-xs-6">
									<input class="form-control" id="titlename" name="titlename" placeholder="如贝斯手，吉他手">
								</div>
							</div>
							<div class="form-group">
								<div class="col-xs-6 col-xs-offset-2">
									<button type="button" class=" form-control btn btn-success" id="sub">提交</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
		<script>
			$(function() {
				$("#sub").click(function() {
					var name = $.trim($('#name').val()); //乐器名字
					var imgurl = $.trim($('#imgurl').val()); //乐器图片URL
					var titlename = $('#titlename').val(); //乐器对应称谓
					if (!name) {
						alert("请输入乐器名字");
						return false;
					}
					if (!imgurl) {
						alert("请上传一张乐器图片");
						return false;
					}
					if (!titlename) {
						alert("请填写乐器对应称谓");
						return false;
					}
					$("#formUrl").submit();
				});
			})

		</script>
	</body>

</html>

</html>